<template>
    <div class="edu-page-warp">
         <condition-card @reset="reset" @search="onSubmit" label-width="110px">
            <el-col :span="8">
                <el-form-item :label="$t('label.schoolTerm')">
                     <CalendarSelect v-model="queryForm.calendarId" :defaulted="true" @load-done="loadDone"></CalendarSelect>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item :label="$t('message.status')">
                   <el-select v-model="queryForm.status"  style="width:100%" clearable>
                         <el-option v-for="(item,index) in options.status" :key="'zt-'+index"  :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item :label="$t('message.type')">
                   <el-select v-model="queryForm.type"  style="width:100%" clearable>
                         <el-option v-for="(item,index) in options.type" :key="'lx-'+index"  :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-col>
        </condition-card>
        <el-card shadow="never">
            <el-row style="margin-bottom:10px">
                <el-col :span="12"><div class="edu-page-title">导师指导记录开关</div></el-col>
                <el-col :span="12">
                    <div class="float-right">
                        <el-button type="primary" @click="openAddDialog">{{$t('message.add')}}</el-button>
                    </div>
                </el-col>
            </el-row>
            <edu-table
                ref="mainTable"
                :order="false"
                :selection="false"
                :pageNum="pageNum_"
                :pageSize="pageSize_"
                :total="total_"
                :data="data"
                @page-change="handlePageChanged"
            >
                <el-table-column :label="$t('label.schoolTerm')"  prop="calendarId" >
                     <template slot-scope="scope">
                         {{getCalendarLable(scope.row)}}
                     </template>
                </el-table-column>
                <el-table-column :label="$t('message.type')"  prop="type" />
                <el-table-column :label="$t('message.status')"  >
                      <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.status==1">{{scope.row.statusLabel}}</el-tag>
                            <el-tag v-else type="info">{{scope.row.statusLabel}}</el-tag>
                      </template>
                </el-table-column>
                <el-table-column :label="$t('label.operation')"  >
                     <template slot-scope="scope">
                         <el-button type="text" @click="handleEdit(scope.row)">{{$t('message.edit')}}</el-button>
                         <el-button type="text" @click="handleDelete(scope.row)">{{$t('message.delete')}}</el-button>
                     </template>
                </el-table-column>
            </edu-table>
        </el-card>
         <edu-dialog
            :visible.sync="dialogVisible"
            :title="title"
            ref="formDialog"
            @close="closeDialog"
            @confirm="confirmDialog"
            width="400px"
        >
            <el-form :model="submitForm" ref="submitForm" label-width="100px" label-suffix="：" :rules="rules">
                <el-row>
                      <el-form-item :label="$t('label.schoolTerm')" prop="calendarId">
                        <el-col :span="20">
                             <CalendarSelect v-model="submitForm.calendarId" :defaulted="true"></CalendarSelect>
                        </el-col>
                      </el-form-item>
                </el-row>
                <el-row>
                      <el-form-item :label="$t('message.type')" prop="type">
                          <el-col :span="20">
                                <el-select v-model="submitForm.type"  style="width:100%" >
                                    <el-option v-for="(item,index) in options.type" :key="'lx-'+index"  :label="item.label" :value="item.value" />
                                </el-select>
                          </el-col>
                      </el-form-item>
                </el-row>
                <el-row>
                      <el-form-item :label="$t('message.status')" prop="status">
                          <el-col :span="20">
                               <el-select v-model="submitForm.status"  style="width:100%" >
                                    <el-option v-for="(item,index) in options.status" :key="'zt-'+index"  :label="item.label" :value="item.value" />
                                </el-select>
                          </el-col>
                      </el-form-item>
                </el-row>
            </el-form>
         </edu-dialog>
    </div>
</template>
<script>
import APIs from 'common/src/api/welcomeService/tutorList'
export default {
    name: 'GuideRecordsControl',
     data() {
        return {         
            options:{
                type:null,
                status:null
            },
            queryForm:{
                calendarId:null,
                status:null,
                type:null
            },
            submitForm:{
                calendarId:null,
                status:null,
                type:null
            },
            dialogVisible:false,
            data:null,
            pageNum_:1,
            pageSize_:20,
            total_:0,
            calendars:[],
            currentId:null,
            editId:null,
            rules:{
                calendarId: [
                    {
                        required: true,
                        message: this.$t('message.plzSelect'),
                        trigger: 'change'
                    }
                ],
                type: [
                    {
                        required: true,
                        message: this.$t('message.plzSelect'),
                        trigger: 'change'
                    }
                ],
                status: [
                    {
                        required: true,
                        message: this.$t('message.plzSelect'),
                        trigger: 'change'
                    }
                ],
            }
        }
     },
     mounted() {
         this.init();
         this.onSubmit();
     },
     methods: {
         init(){
             this.options.type=[{
                label:'新生',
                value:1
             },{
                label:'学院',
                value:2
             }];
             this.options.status=[{
                label:this.$t('label.open'),
                value:1
             },{
                label:this.$t('label.close'),
                value:0
             }]
         },
         reset(){
             this.queryForm.type=null;
             this.queryForm.status=null;
             this.queryForm.calendarId=this.currentId;
             this.onSubmit();
         },
         onSubmit(){
             APIs.getGuidanceRecordsControl(this.queryForm).then(res=>{
                if(res.code==200){
                    res.data.forEach(row=>{
                        let obj=this.options.type.find(t=>t.value==row.type)
                        if(obj){
                            row.type=obj.label;
                        }
                        obj=this.options.status.find(t=>t.value==row.status)
                        if(obj){
                            row.statusLabel=obj.label;
                        }
                    })
                    this.data=res.data;
                }
            })
         },
        openAddDialog(){
            this.dialogVisible=true;
            this.editId=null;
            this.title=this.$t('message.add')
        },
        confirmDialog(){
             this.$refs.submitForm.validate(valid=>{
                if(!valid){
                    return;
                }
                if(this.editId){
                    let param=_.cloneDeep(this.submitForm)
                    param.id=this.editId;
                    APIs.updateGuidanceRecordsControlById(param).then(res=>{
                        if(res.code==200){
                            this.dialogVisible=false;
                            this.$message({
                                type:'success',
                                message:this.$t('message.editSuccess')
                            })
                            this.onSubmit();
                        }
                    })
                }else{
                    APIs.addGuidanceRecordsControl(this.submitForm).then(res=>{
                        if(res.code==200){
                            this.dialogVisible=false;
                            this.$message({
                                type:'success',
                                message:this.$t('message.addSuccess')
                            })
                            this.onSubmit();
                        }
                    })
                }
             });
        },
        closeDialog(){
            this.dialogVisible=false;
            this.submitForm.calendarId=null;
            this.submitForm.type=null;
            this.submitForm.status=null;
            this.$nextTick(()=>{
                this.$refs.submitForm.clearValidate();
            })
        },
        handlePageChanged(obj){
            this.pageNum_=obj.pageNum;
            this.pageSize_=obj.pageSize;
            this.onSubmit();
        },
        handleEdit(row){
            this.title=this.$t('message.edit')
            APIs.getGuidanceRecordsControlById(row.id).then(res=>{
                if(res.code==200){
                    this.editId=row.id;
                    this.submitForm.calendarId=res.data.calendarId;
                    this.submitForm.type=res.data.type;
                    this.submitForm.status=res.data.status;
                    this.dialogVisible=true;
                }
            })
        },
        handleDelete(row){
            this.$eduConfirm(
                this.$t('message.areYouSureDelete'),
                this.$t("message.prompt"),
                {
                    confirmButtonText: this.$t(
                        "message.yes"
                    ),
                    cancelButtonText: this.$t(
                        "message.no"
                    )
                }
            ).then(() => {
               APIs.deleteGuidanceRecordsControl(row.id).then(res=>{
                   if(res.code==200){
                       this.$message({
                           type:'success',
                           message:this.$t('message.deleteSuccess')
                       })
                       this.onSubmit();
                   }
               })
            });
        },
        getCalendarLable(row){
            let option=this.calendars.find(r_=>r_.id==row.calendarId)
            return option?option.fullName:null;
        },
        save(){
             APIs.saveGuidanceRecordsControl({
                 type:1,
                 status:this.status?1:0
             }).then(res=>{
                 if(res.code==200){
                    this.$message({
                        type: 'success',
                        message: this.$t('message.saveSuccess')
                    })
                 }
             })
         },
        loadDone(data,currentId){
            this.calendars=data;
            this.currentId=currentId;
        }
     }
}
</script>